<template>
  <view class="fun-flex-col page">
    <view class="fun-flex-col group">
      <view class="fun-flex-row fun-justify-between">
        <view class="fun-flex-col fun-justify-start fun-relative group_2">
          <view class="section"></view>
        </view>
      </view>
      <view class="fun-flex-col fun-justify-start fun-items-start fun-relative group_4">
        <text class="text_2">Sign Up</text>
        <view class="fun-flex-col fun-justify-start fun-items-end pos_2">
          <view class="group_5"></view>
          <view class="fun-flex-row section_2 pos_3">
            <image class="fun-self-center image_4" src="../../static/e9ed5dfe3443cbdacb9cc14d13f3a4db.png" />
            <input class="fun-self-start font text_4 ml-15" type="text" placeholder="Enter your username"/>
          </view>
          <view class="fun-flex-row fun-items-center section_3 pos_4">
            <image class="image_4" src="../../static/51e860b759cacf3f298c8691a811ba05.png" />
            <input class="font ml-15" type="text" placeholder="Enter your password"/>
          </view>
        </view>
      </view>
    </view>
    <view class="fun-flex-col group_6">
      <view class="fun-flex-col fun-justify-start fun-items-start text-wrapper">
        <input class="font_2 text_5" type="text" placeholder="Enter referral code"/>
      </view>
      <view class="fun-flex-col group_7">
        <view class="fun-flex-row fun-justify-between fun-items-center section_4">
          <input class="font_2" type="text" placeholder="Enter the verification code"/>
          <image class="image_5" src="../../static/9c68bd5f8b6a306e3165e1a208368129.png" />
        </view>
        <view class="fun-flex-row fun-items-center group_8">
          <image class="fun-shrink-0 image_6" src="../../static/35cfc6d004c2d16755c1c5188bc6f203.png" />
          <text class="text_6">By signing up you are agree to our</text>
          <text class="text_7">terms & services.</text>
        </view>
      </view>
    </view>
    <view class="fun-flex-col group_9">
      <view class="fun-flex-col fun-justify-start fun-items-center text-wrapper_2">
        <text class="text_8" @click="signUp">Sign up Now</text>
      </view>
      <view class="fun-flex-row fun-justify-evenly group_10 mt-21">
        <text class="font_3 text_9">Already have an account?</text>
        <text class="font_3 text_10" @click="signIn">Sign In</text>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    components: {},
    props: {},
    data() {
      return {};
    },

    methods: {
		signUp(){
			uni.navigateTo({
				url:'/pages/login/signSuccess',
				
			})
		},
		signIn(){
			uni.navigateTo({
				url:'/pages/login/login',
				
			})
		},
	},
  };
</script>

<style scoped lang="scss">
  .ml-5 {
    margin-left: 10rpx;
  }
  .ml-15 {
    margin-left: 30rpx;
  }
  .mt-21 {
    margin-top: 42rpx;
  }
  .page {
    padding-bottom: 144rpx;
    background-color: #00033b;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    .group {
      height: 696rpx;
      .group_2 {
        width: 384rpx;
        .section {
          background-image: url('../../static/9583b32e879072891cf4e8a10c13c7ed.png');
          background-size: 100% 100%;
          height: 298rpx;
        }
        .text {
          color: #ffffff;
          font-size: 30rpx;
          font-family: SF Pro Text;
          font-weight: 600;
          line-height: 22.18rpx;
        }
        .pos {
          position: absolute;
          left: 64rpx;
          top: 32rpx;
        }
      }
      .group_3 {
        margin-right: 30rpx;
        margin-top: 32rpx;
        .image {
          width: 34rpx;
          height: 22rpx;
        }
        .image_2 {
          width: 30rpx;
          height: 22rpx;
        }
        .image_3 {
          width: 48rpx;
          height: 22.66rpx;
        }
      }
      .group_4 {
        margin-top: -226rpx;
        padding: 282rpx 0 296rpx;
        .text_2 {
          margin-left: 54rpx;
          color: #ffffff;
          font-size: 48rpx;
          font-family: Roboto;
          font-weight: 700;
          line-height: 45.36rpx;
        }
        .pos_2 {
          position: absolute;
          left: 52rpx;
          right: 0;
          top: 0;
          .group_5 {
            opacity: 0.054;
            border-radius: 50% 0 0 50%;
            width: 462rpx;
            height: 622rpx;
            border-left: solid 70rpx #ffffff;
            border-top: solid 70rpx #ffffff;
            border-bottom: solid 70rpx #ffffff;
          }
          .section_2 {
            padding: 24rpx 24rpx 28rpx;
            background-color: #1b1d53;
            border-radius: 50rpx;
            .text_4 {
              margin-top: 12rpx;
            }
          }
          .pos_3 {
            position: absolute;
            left: 0;
            right: 44rpx;
            top: 396rpx;
          }
          .section_3 {
            padding: 24rpx 24rpx 32rpx;
            background-color: #1b1d53;
            border-radius: 50rpx;
          }
          .pos_4 {
            position: absolute;
            left: 0;
            right: 44rpx;
            top: 526rpx;
          }
          .image_4 {
            width: 36rpx;
            height: 36rpx;
          }
          .font {
            font-size: 28rpx;
            font-family: SF Pro Display;
            line-height: 24.88rpx;
            font-weight: 300;
            color: #ffffff;
          }
        }
      }
    }
    .group_6 {
      margin-top: 34rpx;
      padding-left: 54rpx;
      padding-right: 42rpx;
      .text-wrapper {
        padding: 36rpx 0;
        background-color: #1b1d53;
        border-radius: 50rpx;
        .text_5 {
          margin-left: 60rpx;
        }
      }
      .group_7 {
        padding-top: 36rpx;
        .section_4 {
          padding-left: 60rpx;
          background-color: #1b1d53;
          border-radius: 50rpx;
          .image_5 {
            border-radius: 50rpx;
            width: 182rpx;
            height: 76rpx;
          }
        }
        .group_8 {
          padding: 34rpx 24rpx 0 28rpx;
          .image_6 {
            width: 32rpx;
            height: 32rpx;
          }
          .text_6 {
            margin-left: 12rpx;
            color: #a6a7b6;
            font-size: 24rpx;
            font-family: Roboto;
            line-height: 22.42rpx;
          }
          .text_7 {
            color: #175bae;
            font-size: 24rpx;
            font-family: Roboto;
            font-weight: 700;
            line-height: 17.94rpx;
          }
        }
      }
      .font_2 {
        font-size: 28rpx;
        font-family: SF Pro Display;
        line-height: 20rpx;
        font-weight: 300;
        color: #ffffff;
		width: 100%;
      }
    }
    .group_9 {
      margin-top: 170rpx;
      padding: 0 32rpx;
      .text-wrapper_2 {
        padding: 28rpx 0;
        background-color: #5ceec4;
        border-radius: 44rpx;
        .text_8 {
          color: #000000;
          font-size: 32rpx;
          font-family: SF Pro Display;
          font-weight: 700;
          line-height: 30.02rpx;
        }
      }
      .group_10 {
        padding-left: 144rpx;
        padding-right: 132rpx;
        .font_3 {
          font-size: 28rpx;
          font-family: Roboto;
        }
        .text_9 {
          color: #b2b2b2;
          line-height: 26.98rpx;
        }
        .text_10 {
          color: #175bae;
          line-height: 26.02rpx;
        }
      }
    }
  }
</style>